<template>
<table border="1">
  <caption>个人详情</caption>
  <tr><td>照片:</td><td><img :src="person.imgUrl" width="100"></td></tr>
  <tr><td>姓名:</td><td>{{person.name}}</td></tr>
  <tr><td>年龄:</td><td>{{person.age}}</td></tr>
  <tr><td>好友:</td><td>
    <ul><li v-for="fName in person.friends">{{fName}}</li></ul>
  </td></tr>
</table>
  <input type="button" value="加载数据" @click="load()">
</template>

<script setup>
import {ref} from "vue";
const person = ref({});
const load = ()=>{
  person.value = {name:"罗宾",age:20,imgUrl:"a.png",
    friends:["张三","李四","王五"]}
}
</script>

<style scoped>

</style>